import styled from 'styled-components';

export const HeadStyle = styled.div`
    
    display:flex;
    font-size:.12rem;
    flex-direction:column;

    a{
        text-decoration:none;
        color:#1c1717;
    }

    .top{
        dlsplay:flex;
        padding:0 .1rem;
        position: relative;
        height:.4rem;
    }

    .go-back{
        position: absolute;
        top: 0;
        display:flex;
        height: 100%;
        line-height: .4rem;
        width: 1rem;
        justify-content:flex-start;
        align-items:Center;
        font-size:.18rem;
    }

    h2{
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        font-size:.18rem;
    }

    .content{
        position: absolute;
        top: .4rem;
        bottom: 0;
        background-color: #f5f5f5;
        overflow: hidden;
        width: 100%;
        padding: 0 .1rem;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: .15rem;
        color: #999;
        text-align: center;
    }

    .inp-box{
        margin-top: 22px;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;

        input{
            width: 100%;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 16px;
            padding: 13px 5px;
            box-sizing: border-box;
            margin: 0 auto;
            display: block;
            box-shadow: none;
            -webkit-appearance: caret;
            -webkit-appearance: none;
        }

        .phone{
            width:59%;
            position: absolute;
            right:15px;
        }

        select{
            opacity: 0;
            width: 96%;
            height: 44px;
            z-index: 5;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-appearance: menulist;
            box-sizing: border-box;
            align-items: center;
            white-space: pre;
            -webkit-rtl-ordering: logical;
            color: black;
            background-color: white;
            cursor: default;
            border-width: 1px;
            border-style: solid;
            border-color: initial;
            border-image: initial;

            option{
                font-weight: normal;
                display: block;
                white-space: pre;
                min-height: 1.2em;
                font-size:.13rem;
            }
        }

        .area-box,.city-box{
            width: 31%;
            height: 44px;
            float: left;
            line-height: 44px;
            font-size: 16px;
            background-color: #fff;
            position: relative;
            border-radius: 5px;
            border: 1px solid #ccc;
            position: relative;

            .sel-show{
                padding-left: 8px;
                color: #aaa;
                overflow: hidden;
                display: inline-block;
                text-overflow: ellipsis;
                white-space: nowrap;
                left:0;
                position: absolute;
            }
            .more-btn{
                position: absolute;
                width: 46px;
                height: 46px;
                display: block;
                right:0;
                border-radius: 0 5px 5px 0;
                background-color: #cccccc;
                font-size:.13rem;

                em{
                    width: 0px;
                    height: 0px;
                    border-left: 9px solid transparent;
                    border-right: 9px solid transparent;
                    border-top: 9px solid #FFFFFF;
                    font-size: 0px;
                    text-align: center;
                }
            }
        }
        .city-box{
            width:100%;
        }

        button{
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border: none;
            background-color: #7148bf;
            color: white;
            font-size: 18px;
            letter-spacing: 1px;
            margin: 22px auto;
            display: block;
        }
    }

    .clearfix::after{
        display:block;
        content:"";
        height:0;
        visibility:hidden;
        overflow:hidden;
        clear:both;
    }
`;